<template>
   <div class="ms">
        <div class="ms_top">
            <h5>京东秒杀</h5>
            <span class="txt1">12</span>
            <van-count-down :time="time">
            <template #default="timeData" >
                <span class="block">{{ timeData.hours }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.minutes }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.seconds }}</span>
                </template>
            </van-count-down>
            <p class="p2">爆款轮番秒<span>></span></p>
        </div>
        <div class="ms_bottom">
            <div class="lunbo">
                <a href="#" v-for="(v,index) in msimage" :key="index">
                    <img :src="v.src" alt="">
                    <p>￥<span >{{v.price}}</span></p>
                </a>
            </div>
        </div>
    </div>
</template>

<script>
export default {
data(){
    return{
        msimage: [{
            src:"https://m.360buyimg.com/seckillcms/jfs/t1/78507/16/20538/399353/62d4c4d2E1d2a5f7d/8198eb6f39e0059d.jpg",
            price:"2369"
        },
        {
            src:"https://m.360buyimg.com/seckillcms/jfs/t1/154548/37/33142/144695/63956a64E5260030f/8b55f8fedbfba750.jpg",
            price:"223"
        } ,
        {
            src:"https://m.360buyimg.com/seckillcms/jfs/t1/113093/39/28845/59981/63be4ab2Ff821be47/fecca09093fc7b75.jpg",
            price:"85"
        } , {
            src:"https://m.360buyimg.com/seckillcms/jfs/t1/210931/40/24031/77516/62c11d9fE5da15fe1/e46720f1a14e695e.jpg",
            price:"87"
        } ,
        {
            src:"https://m.360buyimg.com/seckillcms/jfs/t1/210931/40/24031/77516/62c11d9fE5da15fe1/e46720f1a14e695e.jpg",
            price:"757"
        } ,
        {
            src:"https://m.360buyimg.com/seckillcms/jfs/t1/191982/26/30974/68306/63b05086F0d3fdea3/2e80bcc241c55434.jpg",
            price:"42"
        } ,
        {
            src:"https://m.360buyimg.com/seckillcms/jfs/t1/191982/26/30974/68306/63b05086F0d3fdea3/2e80bcc241c55434.jpg",
            price:"522"
        } ,
        {
            src:"https://m.360buyimg.com/seckillcms/jfs/t1/66847/23/24895/122278/63bf7870F421443a9/e381035e16299064.jpg",
            price:"422"
        } ,
        {
            src:"https://m.360buyimg.com/seckillcms/jfs/t1/47276/26/22511/92416/63b8445eF67dd7d88/46308fb79df2580a.jpg",
            price:"5554"
        } ,
        {
            src:"https://m.360buyimg.com/seckillcms/jfs/t1/158406/38/28928/226792/62e108fdE9c737b6a/90bcffd3d1e2318e.png",
            price:"53"
        } ,
        {
            src:"https://m.360buyimg.com/seckillcms/jfs/t1/92838/8/32829/46836/63c013c4F6afa5d16/ac0f305f76d6d944.jpg",
            price:"1254"
        } ],
        time: 12 * 60 * 60 * 1000,
    }
}

}

</script>

<style scoped>
.ms {
    width: 94.6667vw;
    height: 36vw;
    background: #fff;
    border-radius: 1.3333vw;
    padding: 0 2.6667vw;
    box-sizing: border-box;
    margin-bottom:5.6vw;
    overflow: hidden;
    font-size: 3.2vw;
    margin: auto;
}

.ms_top {
    display: flex;
    width: 94.6667vw;
    height: 8.8vw;
    background: url(../../assets/ms1-bj.png) no-repeat 0 0/100% 100%;
    align-items: center;
    box-sizing: border-box;
}

.ms_top h5 {
    font-size: 3.2vw;
    font-weight: normal;
}

.ms_top span.txt1 {
    color: #ff2727;
    margin: 0 8vw 0 2.9333vw;
    position: relative;
}

.ms_top span.txt1::after {
    content: "";
    display: block;
    width: 5.3333vw;
    height: 5.3333vw;
    background: url(../../assets/ms.1.png) 0 0/100% 100%;
    position: absolute;
    top: 0;
    left: 2.6667vw; 
}

.ms_top .p1 span {
    width: 4.2667vw;
    height:4.6667vw;
    background: #fe5444;
    border-radius: .8vw;
    color: #fff;
}

.ms_top .p2 {
    margin-left: 29.8667vw;
    color: #ff2727;
}

.ms_top .p2 span {
    font-size: 3.2vw;
}

.ms .ms_bottom {
    width: 100%;
    height: 27.2vw;
    box-sizing: border-box;
    overflow: auto;

}

::-webkit-scrollbar {
    display: none;
}

.ms .ms_bottom .lunbo {
    display: flex;
    width: 150%;
    height:27.2vw;
}

.ms .ms_bottom a {
    display: flex;
    flex-direction: column;
    width: 15.3333vw;
    justify-content: space-around;
    align-items: center;

}

.ms .ms_bottom a img {
    width: 14.6667vw;
    height: 14.6667vw;
}

.ms .ms_bottom a p {
    color: #c82519;
}

  .colon {
    display: inline-block;
    margin: 0 2px;
    color: #ee0a24;
  }
  .block {
    display: inline-block;
    font-size: 12px;
    text-align: center;
    width: 4.2667vw;
    height:4.6667vw;
    background: #fe5444;
    border-radius: .8vw;
    color: #fff;
  }
</style>